<template>
  <div>
    <ElForm inline label-width="100px">
      <ElFormItem label="请假原因：">
        <ElInput v-model="searchForm.reasonS"></ElInput>
      </ElFormItem>
      <ElFormItem style="margin-left: 20px">
        <ElButton type="primary" @click="queryByCondition">Search</ElButton>
        <ElButton @click="reset">Reset</ElButton>
      </ElFormItem>
    </ElForm>
    <!-- 3 使用组件 -->
    <LeaveInsert @post-insert="queryByCondition"></LeaveInsert>
    <ElTable :data="pageResult.records">
      <ElTableColumn prop="leaveId" label="ID" width="160"></ElTableColumn>
      <ElTableColumn prop="actionState" label="请假进度"></ElTableColumn>
      <ElTableColumn prop="leaveType" label="请假类型"></ElTableColumn>
      <ElTableColumn prop="reason" label="请假原因" width="200"></ElTableColumn>
      <ElTableColumn prop="auditor" label="审核人"></ElTableColumn>
      <ElTableColumn prop="auditMsg" label="审核意见"></ElTableColumn>
      <ElTableColumn prop="pic" label="材料"></ElTableColumn>
      <ElTableColumn label="操作">
        <!-- 作用域插槽 -->
        <template #default="line">
          <!-- <ElButton @click="()=>{open4Edit(line)}">编辑</ElButton> -->
          <ElButton size="small" type="info" @click="open4Edit(line)"
            >编辑</ElButton
          >
          <ElButton size="small" type="warning" @click="open4Submit(line)"
            >提交</ElButton
          >
        </template>
      </ElTableColumn>
    </ElTable>
    <ElPagination
      background
      layout="prev, pager, next"
      :total="pageResult.total"
      :page-size="searchForm.pageSize"
      v-model:current-page="searchForm.pageNum"
      @current-change="queryByCondition"
    />
    <LeaveSubmit
      v-model="submitVisible"
      :content-id="currentSubmitId"
      @after-submit="afterSubmit"
    ></LeaveSubmit>

    <!-- <ElDialog :visible.sync="editVisible"> -->
    <ElDialog v-model="editVisible">
      <ElForm style="width: 360px">
        <div>编辑页面</div>
        <ElFormItem label="No.">
          <ElTag>{{ editLeaveAction.leaveId }}</ElTag>
        </ElFormItem>
        <ElFormItem label="请假原因">
          <ElInput v-model="editLeaveAction.reason"></ElInput>
        </ElFormItem>
        <ElFormItem label="请假原因">
          <ElSelect v-model="editLeaveAction.leaveType">
            <ElOption :label="'病假'" :value="'病假'"></ElOption>
            <ElOption :label="'事假'" :value="'事假'"></ElOption>
            <ElOption :label="'年假'" :value="'年假'"></ElOption>
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="请假时间">
          <ElDatePicker type="daterange" v-model="timeRange"></ElDatePicker>
          <!-- <ElDatePicker v-model="editLeaveAction.endTime"></ElDatePicker> -->
        </ElFormItem>
        <ElFormItem label="材料上传">
          <!-- <ElTag>{{ editLeaveAction.pic }}</ElTag> -->
          <!-- ElUpload -->
          <ElUpload
           :auto-upload="true"
           drag
           method="post"
           action="http://localhost:8080/upload/one"
           name="file"
           :headers="{ Authorization: 'Bearer '+ token}"

           :on-success="onSuccess"
          >
            <template #trigger>
                <ElButton size="small">選擇文件</ElButton>
            </template>
          </ElUpload>
        </ElFormItem>
        <ElFormItem label="材料上传地址">
          <div>{{ editLeaveAction.pic }}</div>
        </ElFormItem>
        <ElFormItem label="圖片回顯地址">
          <div>{{ "http://localhost:8080/staticWeb/"+editLeaveAction.pic }}</div>

        </ElFormItem>
        <ElImage style="width: 200px; height: 100px;" 
        :src="'http://localhost:8080/staticWeb/'+editLeaveAction.pic">

        </ElImage>
        <ElFormItem>
          <ElButton type="success" @click="edit"> 保存修改内容</ElButton>
        </ElFormItem>
        <!-- <div>{{ editLeaveAction }}</div>
        <div>{{ timeRange }}</div> -->
      </ElForm>
    </ElDialog>
  </div>
</template>
<script lang="ts">
/**
 * 页面核心数据结构体说明文档
 *  2024-10-14T01:25:58
 *  {
      "leaveId": "LA1728869184389",
      "actionState": "toAudit",
      "": "病假",
      "startTime": "2024-10-14T01:25:58",
      "endTime": "2024-10-14T11:25:58",
      "reason": "xxx",
      "pic": "",
      "applier": "zhangsan001",
      "applierTime": "2024-10-14T09:27:35",
      "auditor": "wangwu005",
      "auditMsg": null,
      "updateTime": "2024-10-14T09:27:35"
    },
 */
// import from
import axios from "@/api/axiosConfig";
import { defineComponent } from "vue";
// 1 导入组件
import LeaveInsert from "@/components/LeaveInsert.vue";
import LeaveSubmit from "@/components/LeaveSubmit.vue";
import { mapState } from "vuex";
import { ElMessage } from "element-plus";
export default defineComponent({
  name: "LeaveApplier",
  // 2 注册组件
  components: {
    LeaveInsert: LeaveInsert,
    LeaveSubmit: LeaveSubmit,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      currentSubmitId: "",
      submitVisible: false,
      timeRange: undefined as any,
      // b:{
      //   leaveType: "病假",
      //   timeRange:['',''],
      //   reason: "看医生。。。",
      // },
      editVisible: false,
      editLeaveAction: {
        leaveType: "",
        startTime: null,
        endTime: null,
        reason: "",
        pic: "",

        leaveId: "",
        actionState: "",
        applier: "",
        applierTime: null,
        auditor: null,
        auditMsg: null,
        updateTime: null,
      },
      sampleD: "value",
      // 页面本地变量
      searchForm: {
        reasonS: "",
        pageNum: 1,
        pageSize: 2,
      },
      pageResult: {
        total: 0,
        records: [],
      },
    };
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
      ...mapState(['token'])
  },
  created() {},
  mounted() {
    this.searchForm.pageNum = 1;
    this.queryByCondition();
  },
  methods: {
    // sampleM() {},
    async queryByCondition() {
      const res = await axios({
        url: "/leaveAction/query4Applier",
        method: "post",
        data: this.searchForm,
      });
      this.pageResult.records = res.data.records;
      this.pageResult.total = res.data.total;

      // console.log(res);
    },
    reset() {
      this.searchForm.reasonS = "";
      this.searchForm.pageNum = 1;
      this.queryByCondition();
    },
    async open4Edit(line: any) {
      console.log("当前的待编辑的数据是:", line.row.leaveId);
      const res = await axios({
        url: "/leaveAction/findById/" + line.row.leaveId,
        method: "get",
      });

      this.editLeaveAction = res.data;
      if (this.editLeaveAction.startTime && this.editLeaveAction.endTime) {
        this.timeRange = [
          this.editLeaveAction.startTime,
          this.editLeaveAction.endTime,
        ];
      }

      this.editVisible = true;
    },
    async edit() {
      // es ecma script
      const editData: any = { ...this.editLeaveAction };
      // const a = Object.assign({},this.editLeaveAction)
      const target: any = {
        leaveId: "",
        leaveType: "",
        startTime: "",
        endTime: "",
        reason: "",
        pic: "",
      };
      // lodash.js 工具库 pick
      for (const key in editData) {
        if (target.hasOwnProperty(key)) {
          target[key] = editData[key];
        }
      }
      // console.log(target)

      // console.log("原地修改" + this.editLeaveAction.leaveId);
      const res = await axios({
        method: "put",
        url: "/leaveAction/edit",
        data: target,
      });
      // 优化用户体验
      // 关闭页面按钮后 查询
      this.editVisible = false;
      this.queryByCondition();
    },
    open4Submit(line: any) {
      this.submitVisible = true;
      this.currentSubmitId = line.row.leaveId;
    },
    afterSubmit(n: any) {
      this.currentSubmitId = "";
      this.submitVisible = false;
      this.searchForm.pageNum = 1;
      this.queryByCondition();
    },
    onSuccess(data:any){
      console.log(data)
      ElMessage.success("上傳成功"+JSON.stringify(data))
      this.editLeaveAction.pic="/"+data
    }
  },
  // mvvm   dom
  watch: {
    // sampleP(n, o) {},
    timeRange(n, o) {
      // console.log(n,o)
      if (n) {
        this.editLeaveAction.startTime = n[0];
        this.editLeaveAction.endTime = n[1];
      } else {
        this.editLeaveAction.startTime = null;
        this.editLeaveAction.endTime = null;
      }
    },
  },
});
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
